﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>商品后台管理系统</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<style>
        /* reset */
    body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; }
    em { font-style:normal; }
    li { list-style:none; }
    a { text-decoration:none; }
    img { border:none; vertical-align:top; }
    table { border-collapse:collapse; }
    input,textarea { outline:none; }
    textarea { resize:none; overflow:auto; }
    body { font-size:12px; font-family:"微软雅黑"; }
    /* end reset */
    .box{width:800px;border:1px solid #77AAE0;margin-left:10px;margin-top:10px;}
    .box_head{width:798px;height:34px;background:url(./images/tab_bg.gif) repeat-x;padding-left:2px;border-bottom:1px solid #77AAE0;}
    .box_head p{float:left;width:60px;height:34px;line-height:34px;background:url(./images/tab_bg_left.gif) no-repeat;text-indent:5px;color:#fff;font-weight:bold;}
    .box_head input{display:inline-block;width:62px;height:24px;background:url(./images/btn.gif);border:0;text-indent:-9999px;margin:5px 5px 0 0;}
    .box_head .sub1{background-position:0 -360px;}
    .box_head .sub2{background-position:0 -96px;}

    table{margin:10px;}
    table,table tr,table th,table td{border:1px solid #77AAE0;background:#F0F8FF;}
    table th{padding-left:5px;height:27px;line-height:27px;text-indent:3px;}
    table th span{font-weight:normal;padding-left:20px;color:red;}
    table td{padding:5px;height:27px;line-height:27px;text-indent:3px;}
    table td span{color:red;padding-left:5px;}
    table input{width:133px;height:22px;border:1px solid #7F9DB9;}
    table .tdw1{width:85px;}
    table .tdw2{width:233px;}

    .fl{float:left;}
    .fr{float:right;}
</style>
<script src="../Public/js/jquery.js"></script>
<script>
    $(function() {
        var flag      = 0;
        var imgWidth  = $(document).width()/2;
        var imgHeight = $(document).height()/2;

        $('#user').blur(function() {
            if($(this).val() == '') {
                $('#user-tip').html('用户名不能为空');
                return false;
            }
            $.ajax({
                'url':'../../user.php?action=ajax&' + Math.random(),
                'type':'POST',
                'data':'user=' + $(this).val(),
                success:function(json) {
                    var code = eval(json);
                    $('#user-tip').html('');
                    if(code == 1) {
                        $('#user-tip').html('用户名已存在');
                    }
                }
            });
        });

        $(document).ajaxStart(function () {
            addBg();
        }).ajaxStop(function () {
            $('#bg').remove();
        });

        $('#compwd').blur(function() {
            $('#pwd-tip').html('');
            if($('#pwd').val() != $(this).val()) {
                $('#pwd-tip').html('两个密码不一致');
            }else {
                flag = 1;
            }
        });

        $('input[type="button"]').click(function() {
            $('#pwd-tip').html('');
            if($('#pwd').val() != $('#compwd').val()) {
                $('#pwd-tip').html('两个密码不一致');
            }else {
                flag = 1;
            }

            if(flag == 0 ) {
                return false;
            }

            var data = $('form').serialize();

            $.ajax({
                'url':'../../user.php?action=sub&' + Math.random(),
                'type':'POST',
                'data':data,
                success:function(json) {
                    var code = eval(json);
                    if(code == 1) {
                        location.href = "../../user.php?action=list";
                    }
                }
            });
        });


        function addBg() {
            $('body').append('<div id="bg"></div>');
            $('#bg').css({
                'opacity' : '0.7',
                'background' : 'black',
                'width' : $(document).width(),
                'height' : $(document).height(),
                'position' : 'absolute',
                'top' : '0',
                'left' : '0'
            });
            $('#bg').append('<img src="../Public/images/load.jpg" id="loading">');

            $('#loading').css({
                'marginTop':imgHeight,
                'marginLeft':imgWidth
            });
        }
    });
</script>
</head>


<body>
    <div class="box">
        <form action="" method="POST">
        <div class="box_head">
            <p>用戶新增</p>
            <div class="">
            <input type="button" class="sub2 fr">
            </div>
        </div>        
        <table>
            <tr>
                <th colspan="4" style="text-align:left;">基本资料<span>帶*號欄位為必填選項</span></th>
            </tr>
            <tr>
                <td class="tdw1">用户名<span>*</span></td>
                <td class="tdw2"><input type="text" name="user" id="user"><span id="user-tip"></span></td>
                <td class="tdw1"></td>
                <td class="tdw2"></td>
            </tr>
            <tr>
                <td>密码<span>*</span></td>
                <td><input type="password" name="pwd" id="pwd"></td>
                <td>确认密码<span>*</span></td>
                <td><input type="password" name="compwd" id="compwd"><span id="pwd-tip"></span></td>
            </tr>
        </table>
        </form>
    </div>
</body>

</html>
